<template>
	<view style="background-color: #f2f2f2;padding-bottom:130rpx;">
		<navBar title="提交订单" />
		<view class="top-detail">
			<view class="img">
				<u-image width="100%" height="300rpx" :src="params.showPic"></u-image>
			</view>
			<view class="date-panle">
				<view class="item">
					<view class="date">{{params.checkInDateShow}}</view>
					<view class="des">入住日期</view>
				</view>
				<view class="item">
					<image src="../../static/hotel/date.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
					<view class="des">共{{params.dayShow}}晚</view>
				</view>
				<view class="item">
					<view class="date">{{params.checkOutDateShow}}</view>
					<view class="des">离店日期</view>
				</view>
				<view class="item" :style="{'color':$u.color.warningDark}" @click="openHotelDetail">详情</view>
			</view>
		</view>
		<view class="panle">
			<view class="tip">因价格较优惠，预定成功后不可取消或修改！订单提交后，酒店20分钟内确认订单！</view>
		</view>
		<view class="panle">
			<!-- :model="form" -->
			<u-form  ref="uForm" label-width="150rpx">
				<u-form-item label="房间数">
					<view class="">一间</view>
					<u-icon slot="right"  name="arrow-down"  @click="roomNumShow = !roomNumShow;"></u-icon>
				</u-form-item>
				<view class="num-list" v-show="roomNumShow">
					<view :class="['item',numActiveIndex == index ? 'active' : '']" v-for="(item, index) in 8" :key="index" @click="selectNum(index)">{{item}}间</view>
				</view>
				<u-form-item label="入住人1"><u-input v-model="form.name" placeholder="请输入姓名"/></u-form-item>
				<u-form-item label="联系手机"><u-input v-model="form.name" type="number" placeholder="请输入手机号"/></u-form-item>
				<u-form-item label="预计到店"><u-input v-model="form.name" type="select" placeholder="请选择到店时间"/></u-form-item>
				<u-form-item label="糖果抵扣">
					<view class="">
						可用11颗糖果抵扣22元
					</view>
					<u-checkbox slot="right" shape="circle" active-color="#FF6600" v-model="form.checked"></u-checkbox>
				</u-form-item>
				<u-form-item label="发票">
					<view class="">如需发票，请向酒店前台索取</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="panle u-p-t-0">
			<view class="u-font-30" :style="{'color': $u.color.contentColor}">支付方式</view>
			<view>
				<radio-group @change="radioChange">
					<view class="u-flex u-row-between u-p-t-30" v-for="(item,index) in payMethod" :key="index">
						<view class="u-flex">
							<u-icon :name="item.iconName" size="65" :color="item.color"></u-icon>
							<text class="u-p-l-10 u-content-color">{{item.name}}</text>
						</view>
						<view>
							<radio style="transform:scale(0.9)" :color="$u.color.warningDark" :value="item.id"
								:checked="index === current" />
						</view>
					</view>
				</radio-group>
			</view>
		</view>
		<view class="panle u-p-t-0">
			<view class="u-font-30 u-m-b-30">扣款说明</view>
			<view class="u-m-b-20" :style="{'color':$u.color.warningDark}">该酒店订单不可退订，温馨提示：防疫期间，请在酒店信息页拨打酒店联系电话确认接待政策，以免影响您的入住。</view>
			<u-checkbox-group>
				<u-checkbox v-model="checked" shape="circle" :active-color="$u.color.warningDark" size="30" label-size="26">
					<!-- @click.stop="toUrl('privacy')" -->
					<text>提交订单表视我已阅读并接受</text>
					<text :style="{'color':$u.color.warningDark}">《酒店预定须知》</text>
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="submitOrder u-flex u-row-between">
			<view class="u-flex-1 u-flex u-p-l-30 u-row-between">
				<view class="u-flex-1">
					<text>在线支付：</text>
					<text :style="{'color':$u.color.warningDark}">¥</text>
					<text class="u-p-l-4 u-font-40 u-f-w" :style="{'color':$u.color.warningDark}">11</text>
				</view>
				<view class="u-p-r-20">费用详情</view>
			</view>
			<view class="submit-btn u-font-32" @click="openkeyboard()">立即支付</view>
		</view>
		<!-- 费用明细 -->
		<u-popup v-model="showPayDetail" mode="bottom" border-radius="20" :closeable="true">
			<view class="u-p-30 u-p-t-100">
				<u-cell-group>
					<u-cell-item title="在线预付" value="1间1晚 共134" :arrow="false" :border-top="false"></u-cell-item>
					<u-cell-item title="可抵扣糖果数" value="77颗" :arrow="false"></u-cell-item>
					<u-cell-item title="糖果抵扣金额" value="$55" :arrow="false"></u-cell-item>
					<u-cell-item title="早餐信息" value="无早" :arrow="false"></u-cell-item>
					<u-cell-item title="2022-02-24" value="234X1" :arrow="false"></u-cell-item>
				</u-cell-group>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import navBar from '@/components/navbar/index'
	
	export default {
		components: {
			navBar
		},
		data() {
			return {
				showPayDetail: true,
				form: {
					name: '',
					checked: true
				},
				checked: false,
				params: {},
				numActiveIndex: 0,
				roomNumShow: false,
				payMethod: [],
				payMethodsList: [{
					id: '1',
					name: '微信支付',
					iconName: 'weixin-circle-fill',
					color: '#03b20f',
					status: false
				}, {
					id: '2',
					name: '支付宝支付',
					color: '#1475f9',
					iconName: 'zhifubao-circle-fill',
					status: false
				}, {
					id: '3',
					name: '银行卡支付',
					iconName: 'photo-fill',
					status: false
				}],
				current: '',
				buyNowProgaram: {
					buyNumber: 0,
					couponId: 0,
					couponType: "",
					delivery: {
						consigneeMobile: "",
						consigneeName: "",
						deliveryLatitude: "",
						deliveryLongitude: "",
						deliveryStreet: "",
						deliveryType: 0,
						pickupMobile: "",
						pickupName: "",
						receiverId: 0
					},
					mobile: "",
					orderRemarks: "",
					orderSource: 0,
					payChannel: 0,
					payMode: "h5",
					productId: 0,
					skuId: 0,
					sourceUserId: 0,
					tradePassword: "",
					useSweet: true
				},
			}
		},
		onLoad(option) {
			this.params = JSON.parse(option.params)
			console.log(this.params)
			this.getPreCreated()
		},
		methods: {
			openkeyboard() {},
			openHotelDetail() {
				
			},
			selectNum(index) {
				this.numActiveIndex = index;
			},
			radioChange(ev) {
				this.buyNowProgaram.payChannel = Number(ev.detail.value);
			},
			getPreCreated() {
				this.payMethod = [];
				this.$u.api.payChannel({}).then(res => {
					if (res.code == 0) {
						this.payChannel = res.data.length > 0 ? this.payMethod[0] : ''
						res.data.forEach(item => {
							this.payMethodsList.forEach(i => {
								if (item == i.id) {
									this.payMethod.push(i)
								}
							})
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.panle {
		padding: 30rpx;
		background-color: #FFFFFF;
	}
	.submitOrder {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		height: 120rpx;
		border-top: 1px solid #f2f2f2;
		z-index: 1000;
	}
	
	.submit-btn {
		height: 100%;
		background: $u-custom-color;
		width: 240rpx;
		text-align: center;
		line-height: 120rpx;
		color: white;
	}
	.top-detail {
		padding: 0 30rpx;
		background-color: #FFFFFF;
		.img {
			overflow: hidden;
			border-top-left-radius: 8rpx;
			border-top-right-radius: 8rpx;
		}
		.date-panle {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-shadow: 0rpx 5rpx 57rpx 0rpx rgba(159, 153, 153, 0.1);
			border-radius: 8rpx;
		}
		.item {
			text-align: center;
		}
		.date {
			margin-bottom: 4rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		.des {
			font-size: 24rpx;
			color: #808080;
		}
	}
	.tip {
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
		background-color: #A6A6A6;
		color: #FFFFFF;
		border-radius: 80rpx;
	}
	
	.num-list {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.item {
			text-align: center;
			width: 23%;
			margin-right: 10rpx;
			margin-top: 16rpx;
			padding: 20rpx 40rpx;
			color: #333333;
			background-color: #FFFFFF;
			border-radius: 8rpx;
			border:1rpx solid #E6E6E6;
		}
		.active {
			color: #FFFFFF;
			background: linear-gradient(-70deg, #F38D90, #FF6600, #FF9933);
			border:1rpx soild ;
		}
	}
	
</style>
